<div #container class="container w-full h-full overflow-visible" cdkDrag (cdkDragEnded)="onContainerDragEnd($event)">
    <div #area class="area absolute w-full h-full overflow-visible"
        [ngStyle]="{
            left: areaPosition().x + 'px',
            top: areaPosition().y + 'px',
            transform: 'scale(' + areaScale() + ')'
        }">
      @for (dimension of dimensions(); track $index) {
        <div #dimensionRef class="dimension group absolute bg-neutral-200 rounded-lg cursor-pointer z-10 w-64 flex flex-col border border-solid border-transparent
            dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700 dark:hover:border-neutral-500
            "
            [class.selected]="selected()?.key === dimension.__id__"
            [ngStyle]="{
                left: layout()[dimension.__id__]?.x + 'px',
                top: layout()[dimension.__id__]?.y + 'px' 
            }"
            [attr.data-key]="dimension.__id__"
            cdkDrag
            (cdkDragEnded)="onDragEnd($event, dimension.__id__)"
            (click)="select($event, dimension.isUsage ? ModelDesignerType.dimensionUsage : ModelDesignerType.dimension, dimension.__id__)"
        >
            <div class="flex justify-between items-center p-2">
              <ngm-entity-property class="flex-1 text-lg font-bold" [property]="dimension" [role]="AggregationRole.dimension"/>

              @if (dimension.isUsage) {
                <button mat-icon-button displayDensity="compact" class="opacity-50 group-hover:opacity-90" (click)="toDimensionUsage(dimension.__id__)">
                    <mat-icon displayDensity="compact" fontSet="material-icons-round" >share</mat-icon>
                </button>
              }
            </div>

            <div class="flex flex-col overflow-hidden hover:overflow-auto max-h-[200px]">
            @for (hierarchy of dimension.hierarchies; track $index) {
              @if (!hierarchy.name) {
                <div class="flex flex-col">
                  @for (level of hierarchy.levels; track level.__id__) {
                    <div class="level-item flex px-2 hover:bg-black/5 dark:hover:bg-white/10"
                        [class.selected]="selected()?.key === level.__id__"
                        (click)="dimension.isUsage ? null : select($event, ModelDesignerType.level, level.__id__)"
                    >
                        <ngm-entity-property class="w-full" [property]="level" [role]="AggregationRole.level"/>
                    </div>
                  }
                </div>
              }
            }

            @for (hierarchy of dimension.hierarchies; track $index) {
              @if (hierarchy.name) {
                <div class="hierarchy-item flex pr-2 hover:bg-black/5 dark:hover:bg-white/10"
                    [class.selected]="selected()?.key === hierarchy.__id__"
                    (click)="dimension.isUsage ? null : select($event, ModelDesignerType.hierarchy, hierarchy.__id__)"
                >
                    <button mat-icon-button displayDensity="compact" (click)="toggleHierarchy(dimension.__id__ + hierarchy.__id__)">
                      @if (expandStatus()[dimension.__id__ + hierarchy.__id__]) {
                        <mat-icon fontSet="material-icons-round">expand_more</mat-icon>
                      } @else {
                        <mat-icon fontSet="material-icons-round">chevron_right</mat-icon>
                      }
                    </button>
                    <ngm-entity-property class="w-full" [property]="hierarchy" [role]="AggregationRole.hierarchy"/>
                </div>
              }

              @if (expandStatus()[dimension.__id__ + hierarchy.__id__]) {
                @for (level of hierarchy.levels; track level.__id__) {
                    <div class="level-item flex pl-10 pr-2 hover:bg-black/5 dark:hover:bg-white/10"
                        [class.selected]="selected()?.key === level.__id__"
                        (click)="dimension.isUsage ? null : select($event, ModelDesignerType.level, level.__id__)"
                    >
                        <ngm-entity-property class="w-full" [property]="level" [role]="AggregationRole.level"/>
                    </div>
                }
              }
            }
            </div>
        </div>
      }

      @if (cube()) {
        <div #cubeRef class="cube absolute bg-neutral-200 rounded-lg cursor-pointer z-10 w-64 flex flex-col border border-solid border-neutral-300
          dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:hover:border-neutral-500"
          [class.selected]="selected()?.key === cube().__id__"
          [ngStyle]="{
              left: layout()[cube().__id__]?.x + 'px',
              top: layout()[cube().__id__]?.y + 'px'
          }"
          (click)="select($event, ModelDesignerType.cube, cube().__id__)"
        >
            <div class="p-2">
              <ngm-display-behaviour class="flex-1 text-lg font-bold"
                [option]="{
                  key: cube().name,
                  caption: cube().caption
                }"
              />
            </div>

            <div class="flex flex-col overflow-hidden hover:overflow-auto max-h-[200px]">

              @for (dimension of dimensions(); track dimension.__id__) {
                <div class="dimension-item flex px-2 hover:bg-black/5 dark:hover:bg-white/10"
                    [class.selected]="selected()?.key === dimension.__id__"
                    (click)="select($event, dimension.isUsage ? ModelDesignerType.dimensionUsage : ModelDesignerType.dimension, dimension.__id__)">
                    <ngm-entity-property class="w-full" [property]="dimension" [role]="AggregationRole.dimension"/>
                </div>
              }
              @for (measure of measures(); track measure.__id__) {
                <div class="measure-item flex px-2 hover:bg-black/5 dark:hover:bg-white/10"
                    [class.selected]="selected()?.key === measure.__id__"
                    (click)="select($event, ModelDesignerType.measure, measure.__id__)">
                    <ngm-entity-property class="w-full" [property]="measure" [role]="AggregationRole.measure"/>
                </div>
              }
              @for (member of calculatedMembers(); track member.__id__) {
                <div class="measure-item calculated-member flex px-2 hover:bg-black/5 dark:hover:bg-white/10"
                    [class.selected]="selected()?.key === member.__id__"
                    (click)="select($event, ModelDesignerType.calculatedMember, member.__id__)">
                    <ngm-entity-property class="w-full" [property]="member" [role]="AggregationRole.measure" />
                </div>
              }
            </div>
        </div>
      }

      @for (connection of connections(); track connection.id) {
        <svg width="100%" height="100%" class="connection-item absolute top-0 left-0 z-0"
          [class.selected]="selected()?.key === connection.id">
            <path
                [attr.d]="edges()[connection.id]?.path"
                fill="none"
                stroke-width="2"
            />
        </svg>
      }
    </div>
</div>

<div class="flex items-center absolute top-0 right-0 p-1">
    <div ngmButtonGroup displayDensity="cosy">
        <button mat-icon-button (click)="zoomIn()">
            <mat-icon fontSet="material-icons-round">zoom_in</mat-icon>
        </button>
        <span>
            {{ areaScale() * 100 | number: '1.0-0' }}%
        </span>
        <button mat-icon-button (click)="zoomOut()">
            <mat-icon fontSet="material-icons-round">zoom_out</mat-icon>
        </button>
    </div>
    <button mat-icon-button color="primary" displayDensity="cosy"
        [matTooltip]="'PAC.KEY_WORDS.AutoArrange' | translate: {Default: 'Auto Arrange'}"
        (click)="autoLayout()">
        <mat-icon fontSet="material-icons-round">hub</mat-icon>
    </button>
</div>